<template>
  <Pageskeleton v-if="skeletonflag"></Pageskeleton>
  <view v-else class="box">
    <view class="order">
      <view class="column" v-if="!order.is_pay">
        <view class="column_type">
          <img class="column_img" src="/static/pay_front.png" alt="">
          <view style="color: #1afa29;" class="column_text">待支付</view>
        </view>
        <img class="column_arrow" src="/static/arrow_front.png" alt="">
      </view>
      <view class="column" v-else>
        <view class="column_type">
          <img class="column_img" src="/static/pay_end.png" alt="">
          <view style="color: #1afa29;" class="column_text">支付成功</view>
        </view>
        <img class="column_arrow" src="/static/arrow_end.png" alt="">
      </view>
      <view class="column" v-if="!order.is_sever">
        <view class="column_type">
          <img class="column_img" src="/static/serve_front.png" alt="">
          <view class="column_text">待确认</view>
        </view>
        <img class="column_arrow" src="/static/arrow_front.png" alt="">
      </view>
      <view class="column" v-else>
        <view class="column_type">
          <img class="column_img" src="/static/serve_end.png" alt="">
          <view style="color: #1afa29;" class="column_text">确认服务</view>
        </view>
        <img class="column_arrow" src="/static/arrow_end.png" alt="">
      </view>
      <view class="column" v-if="!order.is_comment">
        <view class="column_type">
          <img class="column_img" src="/static/comment_front.png" alt="">
          <view class="column_text">待评论</view>
        </view>
        <img class="column_arrow" src="/static/arrow_front.png" alt="">
      </view>
      <view class="column" v-else>
        <view class="column_type">
          <img class="column_img" src="/static/comment_end.png" alt="">
          <view style="color: #1afa29;" class="column_text">评论完成</view>
        </view>
        <img class="column_arrow" src="/static/arrow_end.png" alt="">
      </view>
      <view class="column" v-if="!order.is_comment">
        <view class="column_type">
          <img class="column_img" src="/static/order_front.png" alt="">
          <view class="column_text">再来一单</view>
        </view>
      </view>
      <view class="column" v-else>
        <view class="column_type">
          <img class="column_img" src="/static/order_end.png" alt="">
          <view style="color: #1afa29;" class="column_text">订单完成</view>
        </view>
      </view>
    </view>
    <view class="item">
      <img class="h1-img" style="position: absolute;" src="/static/show.png" alt="">
      <img class="h1-img" :src="order.default_img" alt="">
    <view class="text">
      <view class="text_name">{{order.name}}</view>
      <view class="text_start">开始日期:{{order.date_start}}</view>
      <view class="text_end">结束日期:{{order.date_end}}</view>
    </view>
    </view>

    <view class="total">
      
      
      <view class="row">
        <view class="text">服务时长: </view>
        <view class="symbol">{{ order.date_num }}天</view>
      </view>
      <view class="row">
        <view class="text">每日单价: </view>
        <view class="symbol">￥{{ order.unit_price }}</view>
      </view>
    
      <view class="row">
        <view class="text">应付金额: </view>
        <view class="symbol primary">￥{{ order.price }}</view>
      </view>
    </view>
    <view class="total" style="margin-top: 10px;">
      <view class="title">订单信息</view>
      <view class="row">
        <view class="text">订单编号: </view>
        <view class="symbol">{{ order.serial }}</view>
      </view>
      <view class="row">
        <view class="text">下单时间: </view>
        <view class="symbol">{{order.create_time}}</view>
      </view>
     
    </view>

    <view class="detail" v-if="!order.is_pay">
      <view class="title">支付方式</view>
      <radio-group class="row" @change="pay_ways">
        <img class="row_img" src="/static/alipay_logo.png" alt="">
        <view class="row_text">支付宝</view>
          
            <radio class="row_lable"
            value="0"
            :checked="pay_way==1"
          />
          
      </radio-group> 
        
     
    </view>
    <!-- 底部操作栏 -->
    <view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
    <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      <!-- 待付款状态:展示支付按钮 -->
      <template v-if="!order.is_pay">
        <view class="button primary" @tap="onOrderPay"> 去支付 </view>
        <view class="button" @tap="unOrderPay"> 取消订单 </view>
      </template>
      <template v-else-if="!order.is_sever">
        <view class="button primary" @click.stop="Onsever(order.serial)"> 确认服务 </view>
        <view class="button" @tap="unOrderPay"> 取消订单 </view>
      </template>
      <template v-else-if="!order.is_comment">
        
       
        <navigator
        class="button" 
         :url="`/pages/comment/comment?serial=${order.serial}`"
          open-type="navigate">
          立即评价
        </navigator>
      </template>
      <template v-else>
        
        <navigator
        class="button" 
         :url="`/pages/detail/detail?id=${order.matron_id}`"
          open-type="navigate">
          再来一单
        </navigator>
      </template>
      
    </view>
  </view>
</template>

<script setup lang="ts">
import {http} from '@/utlis/http.ts'
import {ref} from 'vue'
import Pageskeleton from './components/Pageskeleton.vue'
import {useMemberStore} from "@/stores/modules/member.ts"
const skeletonflag = ref(true)
const pay_way=ref(1)
const pay_ways=(e)=>{
pay_way.value=e.detail.value
}
const Onsever=(serial)=>{
    console.log('serial',serial)
    uni.request({
      url: 'order/sever/',
      data: {
        serial:serial,
        type:true
      },
      method:'POST',
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
   
	// #ifdef H5
		withCredentials: true,
	// #endif
  
      sslVerify: true,
      success: ({ data, statusCode, header }) => {
        if(data.code==200 || data.code==0){
          uni.showToast({
            title: '确认成功',
            icon: 'success',
            mask: true
          })
      
        }
        else{
          uni.showToast({
            title: '确认失败',
            icon: 'error',
            mask: true
          })
        }
        
      },
      fail: (error) => {}
    })
  }
const onOrderPay=()=>{
  uni.navigateTo({ url: `/pages/alipay/alipay?serial=${order.value.serial}`})
  uni.request({
    url: 'alipayfrom/',
    data: {
      serial:order.value.serial
    },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    method: 'POST',
    sslVerify: true,
    success: ({ data, statusCode, header }) => {
      console.log('datapay',data)
      const memberStore = useMemberStore()
      memberStore.setalipayurl(data.alipay_url+'?'+data.order_string)
      // #ifdef H5
      location.href=data.alipay_url+'?'+data.order_string
      // #endif
      
    },
    fail: (error) => {}
  })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()


// 在test.vue页面接受参数
const querys=defineProps<{
      order:String
}>()
const order=ref(querys.order)
console.log(order.value)
// 定义开始日期和结束日期
uni.request({
  url: 'order/detail/',
  data: {serial:order.value},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'post',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    console.log('detail',data)
    order.value=data.data
    var dateStart = new Date(order.value.date_start);
var dateEnd = new Date(order.value.date_end);

// 计算两个日期之间的毫秒数差异
var timeDifference = dateEnd.getTime() - dateStart.getTime();
// 将毫秒数转换为天数
var daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
order.value.date_num=daysDifference
order.value.unit_price=Math.floor(order.value.price/daysDifference)
console.log('orer',order.value)
skeletonflag.value = false
  },
  fail: (error) => {}
})






</script>
<style lang="scss">
  /* #ifdef H5 */
  page{
    background-color: rgba(0, 0, 0, 0.03);
  }
  /* #endif */
  
.box{
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.03);
  
  .order{
    width: 100%;
    height: 125px;
    margin-bottom: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .column{
      display: flex;
      align-items: center;
      justify-content: center;
      .column_type{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .column_img{
          width: 35px;
          height: 35px;
          margin: 5px;
        }
        .column_text{
          color: rgba(0, 0, 0, 0.3);
          font-size: 12px;
          letter-spacing: 0.01em;
          text-align: center;
        }
      }
      .column_arrow{
        width: 50px;
        height: 35px;
        transform: translateY(-3px);
      }
    }
}
 
  .order_type{
    margin: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #fff;
  }
  .item{
    
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    .h1-img{
      
      width: 5rem;
      height: 5rem;
      border-radius: 5px;

    }
    .text{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      letter-spacing: 0.01em;
      margin-left:10px ;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.5);
      .text_name{
        letter-spacing: 0.09em;
        color: rgba(0, 0, 0, 0.7);
        font-size: 16px;
        font-weight: 600;
      }
    }
    #title{
      font-size: 13px;
    }
    #price{
      color: red;
    }
  }
  .total {
    
    line-height: 1;
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 3px;
    padding: 2px;
    padding-bottom: 10px;
    background-color: #fff;
    letter-spacing: 0.05em;
    .title {
    font-size: 32rpx;
    color: #444;
    padding: 8px;
  }
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      /* border-bottom: 0.5px solid rgba(0, 0, 0, 0.2); */
    }
    .text{
color: rgba(0, 0, 0, 0.6);
/* font-weight: 400; */
    }

    .symbol::before {
     
      font-size: 80%;
      margin-right: 3rpx;
    }

    .primary {
      color: #cf4444;
      font-size: 36rpx;
    }
  }
  .detail {
    width: 100%;
  line-height: 1;
  padding: 10px 5px 0;
    margin-top: 10px;
  font-size: 30rpx;
  color: #666;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    font-size: 32rpx;
    color: #444;
    padding-left: 5px;
  }
  .row{
    display: flex;
    align-items: center;
    justify-content: flex-start;
   
    .row_img{
    width: 35px;
    height: 35px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .row_text{
    color: rgba(0, 0, 0, 0.7);
flex-grow: 1;
  }
  .row_lable{
   
margin: 7px;
    justify-content: flex-end;
  }
  }

 
}
.toolbar-height {
  height: 100rpx;
  box-sizing: content-box;
}

.toolbar {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 1;

  height: 100rpx;
  padding: 10 30rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: #fff;
  box-sizing: content-box;

  .button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200rpx;
    height: 72rpx;
    margin-left: 15rpx;
    font-size: 26rpx;
    border-radius: 72rpx;
    border: 1rpx solid #ccc;
    color: #444;
  }

  .delete {
    order: 4;
    color: #cf4444;
  }

  .button {
    order: 3;
  }

  .secondary {
    order: 2;
    color: #27ba9b;
    border-color: #27ba9b;
  }

  .primary {
    order: 1;
    color: #fff;
    background-color: #27ba9b;
  }
}
}
</style>
